$(function() {
    // 使用layui的表单验证自定义用户昵称的长度验证
    var form = layui.form;
    var layer = layui.layer
    form.verify({
            nickname: function(value) {
                if (value.length > 6) {
                    return '昵称长度必须在 1 ~ 6 个字符之间！'
                }
            }
        })
        // 调用获取用户的基本信息的函数
    initUserInfo()
        // 初始化用户的基本信息
    function initUserInfo() {
        $.ajax({
            method: 'GET',
            url: '/my/userinfo',
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('获取用户信息失败')
                }
                // $("input[name=username]").val(res.data.username) // 一般使用的方法
                // layui的快速为表单赋值方法  
                form.val('formUserInfo', res.data)
            }
        })
    }
    // 实现点击重置按钮，还原到未修改前的信息
    $("#btnReset").click(function(e) {
            // 当表单需要修改表单控件的默认行为的时候，需要先阻止它的默认行为  否则会先触发默认行为，然后再执行修改的行为，体验不好
            e.preventDefault()
            initUserInfo()
        })
        // 点击提交修改，发起更新用户基本信息的请求
    $(".layui-form").on('submit', function(e) {
        // 阻止默认提交行为
        e.preventDefault()
            // 获取表单数据
        var data = $(this).serialize()
        $.ajax({
            method: 'POST',
            url: '/my/userinfo',
            data: data,
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('修改用户信息失败')
                }
                layer.msg('修改用户信息成功')
                    // 调用父页面中的方法，重新渲染用户的头像和用户的信息
                    // window代表这个user_info所在的窗口，parent代表这个窗口的父亲，也就是index.html,然后实现了调用这个父页面的getUserInfo()方法
                    // 主要是因为user_info是通过index中的iframe标签来展示的，所以才有了这么一层关系
                window.parent.getUserInfo()
            }
        })
    })
})